ul {
	margin: 0;
	padding: 0
}

.hide {
	display: none
}

#chat .chat-cell {
	clear: both;
	margin: 26px 0;
	overflow: auto
}

#chat .chat-cell-left div {
	float: left
}

#chat .chat-cell-right div {
	float: right
}

#chat .chat-cell {
	position: relative;
	z-index: 1
}

#chat .chat-content {
	margin: .05em .5em;
	padding: .5em;
	text-shadow: 0 0;
	max-width: 58%;
	font-size: 16px;
	line-height: 1.4em
}

#chat .chat-readed {
	font-size: .6em;
	background: #adadad;
	color: #fff;
	padding: .2em .3em;
	text-shadow: 0 0;
	border-radius: .4em;
	margin-top: 2.3em;
	font-weight: 100
}

#chat .chat-hint {
	position: relative;
	z-index: 0;
	text-align: center;
	margin: .5em auto;
	color: #8B827C;
	line-height: 1.5;
	font-size: .8em;
	text-shadow: 0 0;
	font-weight: 300;
	width: 21em
}

#chat .fade-animate {
	animation: fade 1.2s
}

@keyframes fade {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

#panel .chatbtn,#toggle {
	display: block;
	font-size: 16px;
	margin: .5em .5em;
	font-weight: 500
}

#get-point {
	text-align: center;
	position: relative;
	z-index: 2
}

#get-point div {
	background: url(../img/score.png) no-repeat;
	margin: auto
}

#get-point .get-point-0 {
	background-position: 0 -360px;
	width: 120px;
	height: 64px
}

#get-point .get-point-1 {
	background-position: -130px -360px;
	width: 124px;
	height: 64px
}

#get-point .get-point-2 {
	background-position: -260px -360px;
	width: 158px;
	height: 64px
}

.person-photo {
	border-radius: 3px;
	background: #fff;
	overflow: hidden
}

#panel-btn .panel-photo {
	float: left;
	width: 55px;
	height: 55px;
	margin: -.1em 1em .4em .3em
}

#panel-btn .panel-photo img {
	width: 60px
}

#circle-photo div {
	width: 60px;
	height: 60px;
	border-radius: 50%
}

#circle-photo .person-motion-0 {
	background-position: 0 0;
	background-size: cover;
	animation: innerFade 1s linear infinite
}

@keyframes innerFade {
	from {
		box-shadow: inset 0 0 .6em .6em rgba(255,0,0,.1)
	}

	50% {
		box-shadow: inset 0 0 1.8em 1.8em rgba(255,0,0,.2)
	}

	to {
		box-shadow: inset 0 0 .6em .6em rgba(255,0,0,.1)
	}
}

#circle-photo .person-motion-1 {
	background-position: -60px 0;
	background-size: cover
}

#circle-photo .person-motion-2 {
	background-position: -120px 0;
	background-size: cover
}

#chat #circle-line {
	position: relative;
	width: 70px;
	height: 70px;
	top: -4.04em;
	left: -.3em
}

#panel-btn #toggle {
	height: 30px;
	line-height: 30px;
	border-radius: .3em
}

#panel .end-btn img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2rem;
	margin: auto;
	width: 120px
}

.end-container {
	width: 90%;
	margin: auto;
	text-align: center
}

.end-container ul {
	display: inline-block
}

.end-container ul img {
	height: 30px
}

.end-container .end-line {
	margin: .8em .5em;
	width: 68px;
	height: 4px;
	border-radius: 1em
}

.end-container div img {
	margin: .5em 0;
	width: 200px
}

.end-container .endf-line {
	background: #a1a7b6
}

.end-container .ends-line {
	background: #ff439d
}

.end-container .endb-line {
	background: #f3a524
}

.end-container .endc-line {
	background: #5e8eff
}

.end-container .e-score {
	position: relative;
	top: 12px;
	width: 52px;
	height: 52px;
	background: url(../img/score.png) no-repeat;
	background-size: 580px
}

.end-container .score-100 {
	width: 70px;
	background-position: -512px 6px
}

.end-container .score-10 {
	background-position: -33px 6px
}

.end-container .score-20 {
	background-position: -86px 6px
}

.end-container .score-30 {
	background-position: -140px 6px
}

.end-container .score-40 {
	background-position: -192px 6px
}

.end-container .score-50 {
	background-position: -247px 6px
}

.end-container .score-60 {
	background-position: -300px 6px
}

.end-container .score-70 {
	background-position: -355px 6px
}

.end-container .score-80 {
	background-position: -405px 6px
}

.end-container .score-90 {
	background-position: -460px 6px
}

.end-container .score-0 {
	width: 30px;
	background-position: 0 6px
}

.end-container .end-text {
	width: 180px;
	height: 50px;
	background: url(../img/score.png) no-repeat;
	margin: .2em auto;
	background-size: 380px
}

.end-container .s-text {
	background-position: 5px -60px
}

.end-container .f-text {
	background-position: -170px -60px
}

.end-container .b-text {
	background-position: -170px -107px
}

.end-container .c-text {
	background-position: 5px -108px
}

.end-container .e-fen {
	width: 40px;
	height: 44px;
	background: url(../img/score.png) no-repeat;
	background-size: 560px
}

.end-container .s-fen {
	background-position: -40px -42px
}

.end-container .f-fen {
	background-position: -90px -42px
}

.end-container .b-fen {
	background-position: -130px -42px
}

.end-container .c-fen {
	background-position: 0 -42px
}

.bounceIn {
	animation: bounceIn .3s linear forwards
}

@keyframes bounceIn {
	from,50%,to {
		animation-timing-function: cubic-bezier(.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		transform: scale3d(.3,.3,.3)
	}

	50% {
		transform: scale3d(1.1,1.1,1.1)
	}

	to {
		opacity: 1;
		transform: scale3d(1,1,1)
	}
}

.sk-three-bounce {
	margin: auto;
	text-align: center;
	padding: .35em
}

.sk-three-bounce .sk-child {
	width: .5em;
	height: .5em;
	margin-right: .3em;
	background-color: #d05252;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
	animation: sk-three-bounce 1.4s ease-in-out 0s infinite both
}

.sk-three-bounce .sk-bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s
}

.sk-three-bounce .sk-bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s
}

@-webkit-keyframes sk-three-bounce {
	0%,80%,100% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes sk-three-bounce {
	0%,80%,100% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}